<template>
	<div class="w100 h100 flex-col">
		<div class="flex p-x-5 m-t-5">
			<el-tree-select
				ref="refTree"
				v-model="treeVal"
				clearable
				filterable
				check-strictly
				node-key="id"
				:render-after-expand="false"
				:data="treeList"
				:props="{
					children: 'children',
					label: 'title'
				}"
				:filter-node-method="(val, item) => item.type === 'M'"
				placeholder="请选择目录"
			/>
			<my-input v-model="inputVal" class="m-l-5" prefix-icon="Search" placeholder="请输入模型名称" />
		</div>
		<div class="f1 h0 p-x-5 m-t-5">
			<n-grid :x-gap="5" :y-gap="5" :cols="4">
				<n-grid-item v-for="item in moxingList" :key="item.id">
					<Item :item="{ ...item, isModel: true }" />
				</n-grid-item>
			</n-grid>
		</div>
	</div>
</template>

<script setup>
import Item from './Item.vue';
import { listModel } from '@/api/threeModel';
import { find } from '@u/tree';

// 数据
let refTree = shallowRef(null),
	treeVal = ref(''),
	treeList = ref([]),
	moxingList = ref([]),
	moxingAllList = [];
listModel().then((res) => {
	moxingAllList = find(res.data, false, (item) => item.type === 'Y');
	moxingList.value = clone(moxingAllList);
	treeList.value = res.data;
	nextTick(() => {
		refTree.value.filter();
	});
});

// 模型列表过滤
const inputVal = ref('');
watch([treeVal, inputVal], ([parentId, title]) => {
	moxingFilter(parentId, title);
});
const moxingFilter = debounce((parentId, title) => {
	moxingList.value = moxingAllList.filter((item) => {
		if (parentId) {
			return item.title.includes(title) && item.parentId == parentId;
		} else {
			return item.title.includes(title);
		}
	});
});
</script>
